<template>
	<view class="center">
		<!-- <view class="header">
			<view class="arrow" @tap="$back()">
				<image class="lefts" style="width: 20rpx;height: 40rpx;" src="../../../static/images/arrow_left.png" mode="aspectFit"></image>
			</view>
			<view class="tit f36 cfff">
				<text>足迹详情</text>
			</view>
			<view class="btn f32 cfff btn-plain-primary btn-radius">
			</view>
		</view> -->
		<hea-ders title="足迹详情">
			<image class="left" slot='left' src="@/static/images/arrow_left.png" mode="widthFix" @click="back"></image>
		</hea-ders>
		<view class="bottom_item">
			<text>2020年6月16日</text>
			<text class="guiji" @tap="$open('../track/track')">轨迹</text>
		</view>
		<view class="foot_item">
			<text class="foot_item_text">09:24</text>
			<image src="../../../static/error.png" mode=""></image>
			<text class="foot_item_texts">地址：江苏省徐州市泉山区淮海西路27号中枢小区</text>
		</view>
		<view class="foot_item">
			<text class="foot_item_text">09:24</text>
			<image src="../../../static/error.png" mode=""></image>
			<text class="foot_item_texts">地址：江苏省徐州市泉山区淮海西路27号中枢小区</text>
		</view>
		<view class="foot_item">
			<text class="foot_item_text">09:24</text>
			<image src="../../../static/error.png" mode=""></image>
			<text class="foot_item_texts">地址：江苏省徐州市泉山区淮海西路27号中枢小区</text>
		</view>
	</view>
</template>

<script>
	import heaDers from '@/pages/header/header.vue'
	export default {
		components:{
			heaDers
		},
		data() {
			return {

			};
		},
		methods:{
			back(){
				uni.navigateBack({
					delta:1
				})
			},
		}
	}
</script>

<style lang="scss">
	.center {
		background: #F5F5F5;
		.title {
			width: 100%;
			height: 88rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			background-color: rgba(36, 153, 246, 1);
			display: flex;
			justify-content: space-between;
			align-items: center;
			image {
		
				width: 22rpx;
			}
			text {
				font-size: 36rpx;
				color: #fff;
				font-weight: 400;
				font-family: PingFang SC;
			}
			.ima {
				image {
					width: 40rpx;
					margin-left: 5rpx;
				}
			}
		}
		
		.bottom_item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 26rpx;
			height: 88rpx;
			border-bottom: 1px solid #F5F5F5;
			background: #fff;
		
			text {
				font-size: 28rpx;
			}
		
			.guiji {
				color: #2593E9;
				width: 80rpx;
				height: 40rpx;
				border: 1px solid rgba(37, 147, 233, 1);
				opacity: 1;
				text-align: center;
			}
		}
		
		.foot_item {
			display: flex;
			padding: 20rpx;
			background: #fff;
			border-bottom: 1px solid #F5F5F5;
			image {
				width: 120rpx;
				height: 120rpx;
			}
		
			text {
				font-size: 24rpx;
				// padding-right: 24rpx;
			}
			.foot_item_text{
				padding-right: 20rpx;
			}
			.foot_item_texts{
				padding-left: 20rpx;
			}
		}
	}

	
</style>
